<!--
 * Date: 2018年01月02日 09:32:33
 * LastEditors: lvyou
 * LastEditTime: 2019年11月27日 16:06:25
 * FilePath: \youlinweb-master\src\pages\replace\replacedetail\replacedetail.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div>
    <ylheader :leftsvg="true" :title="'闲置详情'" :rightmoresvg="isme" @moresvg="deletereplace" :isrightcollectsvgshow="!isme" :rightcollectsvg="rightcollectsvgicon" @collectevent="iscollectevent"></ylheader>
    <deletepopup :type="1" @candelete="deletetopiccomments" @cancledelete="canaledeteletopiccomments" :isshowdeletepopup="showdelete" @deleteshow="deleteshow"></deletepopup>
    <mt-popup v-model="isdelete" position="bottom">
      <div style="width: 7.5rem;display: flex;flex-direction: column;align-items: center">
        <div class="delete" @click="deletemyreplace">
          <span>删除</span>
        </div>
        <div style="background-color: #f5f5f5;height: 1px;width: 100%"></div>
        <div v-if="replacedResult!=1" class="delete" @click="repeatmyreplace">
          <span>重发</span>
        </div>
        <div v-if="replacedResult!=1" style="background-color: #f5f5f5;height: 0.1rem;width: 100%"></div>
        <div class="cancle" @click="iscancle">
          <span>取消</span>
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="isreply" position="bottom">
      <div style="width: 7.5rem;display: flex;flex-direction: column;align-items: center">
        <div class="delete" @click="replycom">
          <span>回复</span>
        </div>
        <div style="background-color: #f5f5f5;height: 1px;width: 100%"></div>
        <div v-if="ismyself==true" class="delete" @click="deletereply">
          <span>删除</span>
        </div>
        <div style="background-color: #f5f5f5;height: 0.1rem;width: 100%"></div>
        <div class="cancle" @click="replycancle">
          <span>取消</span>
        </div>
      </div>
    </mt-popup>
    <div class="loadmore-container" ref="myWrapper">
      <div class="loadmore-ul">
        <div v-for="(item,index) of replacelist" style="background-color: white;" :key="index">
          <displacedetailheader :statustype="item.replacedResult" :repplace="item.place" :commentindex="index" :name="item.name" :time="item.timeStamp" :money="item.price" :avatar="item.head" :userType="item.userType" :isTalent="item.isTalent" :pendantType="item.pendantType" :pendantPicUrl="item.pendantPicUrl"></displacedetailheader>
          <newrepcommentbody :money="item.price" :commentindex="index" :commenttype="null" :commenttext="item.title" :piclength="item.picture.length" :picarray="item.picture" :isdisplacetype="2" :description="item.content">
          </newrepcommentbody>

        </div>
        <div style="margin-top: 0.2rem">
          <div class="allcomments">
            全部评论
              <span>(</span>
                <span style="color: #fb685b">{{commentcounts}}</span>
              <span>)</span>
           
          </div>
          <div style="background-color: white;padding-bottom: 0.95rem">
            <div class="comment" v-for="(items,index) in commentList" :key="index">
              <commentdetailheader :zannum="items.likeNumber" :avaterImg="items.headImg" :name="items.nickName" :time="items.timeStamp" :commentindex="index" :commentdetailisup="items.isgood" @comentdetailthumb="iscomentdetailthumb" @replycomment="replyother" :userType="items.userType" :isTalent="items.isTalent" :pendantType="items.pendantType" :pendantPicUrl="items.pendantPicUrl"></commentdetailheader>
              <commentbody @showImg="popupImg" :atname="items.atName" :commenttype="items.atName" :commenttext="items.content" :piclength="items.picture.length" :picarray="items.picture" :isdisplacetype="1" @replycomment="replyother" :commentindex="index"></commentbody>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div v-for="(item,index) of replacelist" style="background-color: white;" :key="index">
      <div style="position: fixed;bottom: 0;width: 100%;z-index: 2;height: 0.9rem;">
        <div class="bottom-sep"></div>
        <thubm-up :topiccommentnum="item.commentNumber" :thumbupnum="item.likes" :commentindex="index" :isup="item.isgood" @thumbup="isdisplacethumbup" @commentsvgg="todisplacepublish"></thubm-up>
      </div>
    </div>
          <transition name="fade">
      <div class="modal-img" v-if="popupVisible" @click="popupVisible=false">
        <mt-swipe :auto="100000" style="width: 100%;height: 100vh;position:relative;"
        :continuous="false" 
          :defaultIndex="swiperIndex" :showIndicators="false" >
            <mt-swipe-item v-for="(item,index) in popImg" :key="index" style="height:100vh" >
              <img v-lazy="item" class="swiper-img" />
            </mt-swipe-item>
          </mt-swipe>
      </div>
    </transition>
  </div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import newrepcommentbody from "src/components/replacedetail/new-replace-commentdetail-body.vue";
import commentbody from "src/components/comment-detail-body.vue";
import commentdetailheader from "src/components/commentdetail-header.vue";
import { Pupup } from "mint-ui";
import api from "src/api/index";
import displacedetailheader from "src/components/replacedetail/hot-displacedetail-header .vue";
import thubmUp from "src/components/thumb-up.vue";
import deletepopup from "src/components/deletepopup.vue";

export default {
  name:"replacedetail",
  data() {
    return {
      swiperIndex:0,
      popupVisible:false,
      popImg:'',
      isuptype: 0,
      isdelete: false,
      isreply: false,
      commentcounts: "",
      tag: "",
      ismyself: "",
      isme: "",
      replacelist: [],
      commentList: [],
      deleterep: false,
      deletereplacereply: false,
      showdelete: false,
      mystatus: "",
      mypage: 1,
      replacedResult: "",
      is_r: false,
      hasmore: "",
      rightcollectsvgicon:0,//0未收藏，1已收藏
    };
  },
  components: {
    ylheader,
    commentbody,
    commentdetailheader,
    Pupup,
    displacedetailheader,
    newrepcommentbody,
    deletepopup,
    thubmUp
  },
  mounted() {
    this.replacedResult = this.$route.query.replacedResult;
    const addclick = {
      id: this.$route.query.replacedId,
      type: 3
    };
    this.$util.saveclicknum(addclick);
    this.initReplace()
      .then(data => {
        return this.initRepdetailbottomcomments();
      })
      .then(data => {
        return this.initScroll();
      })
      .then(data => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.myscroll.refresh();
          }, 2000);
        });
      });
  },

  methods: {
        //显示图片
      popupImg(data,index){
        console.log(data,index)
        this.swiperIndex = index
        if(typeof data == 'string'){
          data = data.split(',')
        }
        //console.log(data,index)
        this.popImg = data;
        this.popupVisible = true;
        // console.log(this.swiperOne)
        // this.swiperOne.slideTo(index)
      },
    initReplace() {
      let p = new Promise((resolve, reject) => {
        const data = {
          replacedId: this.$route.query.replacedId,
          page: 1,
          limit: 1,
          showType: ""
        };
        api.Queryreplace(data).then(res => {
          if (res.success) {
            this.replacelist = res.data.list;
            this.$util.getListUrl(this.replacelist);
            this.rightcollectsvgicon = res.data.list[0].isCollected;
            if (this.replacelist[0].userId == localStorage.getItem("userId")) {
              this.isme = true;
            } else {
              this.isme = false;
            }
            if(typeof(localStorage.placeStorage)!="undefined"){
              let placeObj = JSON.parse(localStorage.placeStorage);
              if(this.$route.query.replaceIndex<placeObj.commentlist.length){
                placeObj.commentlist[this.$route.query.replaceIndex].commentNumber=res.data.list[0].commentNumber;
              }
              let tempPlaceObj = JSON.stringify({
                commentlist: placeObj.commentlist,
                hasmore: placeObj.hasmore,
                totalPage: placeObj.totalPage,
                page: placeObj.page,
                selected: placeObj.selected,
                myid: placeObj.myid,
                pageone: placeObj.pageone,
                pagetwo: placeObj.pagetwo,
                pagethree: placeObj.pagethree
              });
              localStorage.placeStorage = tempPlaceObj;
            }
            resolve("初始化闲置...");
          } else {
            resolve("获取闲置数据失败...");
          }
        });
      });
      return p;
    },

    /**
       * 闲置限制的评论列表
       */
    initRepdetailbottomcomments() {
      let p = new Promise((resolve, reject) => {
        if (this.hasmore) this.mypage += 1;
        const json = {
          page: this.mypage,
          limit: 10,
          replacedId: this.$route.query.replacedId
        };
        api.Queryrepdetailbottomcomments(json).then(res => {
          if (res.success) {
            this.commentList = [...this.commentList, ...res.data.list];
            this.picAutoOrient(this.commentList);
            this.commentcounts = res.data.totalCount;
            if (res.data.currPage < res.data.totalPage) {
              this.is_r = false;
              this.hasmore = true;
            } else {
              this.hasmore = false;
            }
            if (this.mypage > 1) {
              setTimeout(() => {
                this.myscroll.refresh();
              }, 0);
            }
            resolve("评论列表...");
          } else {
            resolve("获取评论失败...");
          }
        });
      });
      return p;
    },
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let myWrapper = this.$refs.myWrapper;
        let _this = this;
        this.$nextTick(() => {
          localStorage.tempPageHeight = document.getElementsByClassName(
            "loadmore-ul"
          )[0].scrollHeight;
          _this.myscroll = new iScroll(myWrapper, {
            onScrollMove: function() {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.hasmore &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                _this.initRepdetailbottomcomments();
              }
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll...");
        });
      });
      return p;
    },
    deletetopiccomments() {
      this.showdelete = false;
      if (this.mystatus == "big") {
        if (localStorage.getItem("userId") != this.replacelist[0].userId) {
          return;
        }
        const data = {
          replacedId: this.replacelist[0].replacedId
        };
        api.Querydeletereplace(data).then(res => {
          if (res.success) {
            this.replacelist.pop();
            this.isdelete = false;
            localStorage.turnCount = "";
            this.$router.go(-1);
          } else {
            this.$toast("删除失败");
          }
        });
      } else if (this.mystatus == "small") {
        if (
          localStorage.getItem("userId") != this.commentList[this.tag].userId
        ) {
          return;
        }
        const id = {
          replacedReplyId: this.commentList[this.tag].replyId,
          userId: this.commentList[this.tag].userId
        };
        api.Querydeletereplacecomments(id).then(res => {
          if (res.success) {
            this.deletereplacereply = false;
            this.commentList.splice(this.tag, 1);
            this.commentcounts -= 1;
          }
        });
      }
    },
    canaledeteletopiccomments() {
      this.showdelete = false;
    },
    cancledelete() {
      this.deleterep = false;
    },
    ok() {
      if (localStorage.getItem("userId") != this.replacelist[0].userId) {
        return;
      }
      const data = {
        replacedId: this.replacelist[0].replacedId
      };
      api.Querydeletereplace(data).then(res => {
        if (res.success) {
          this.replacelist.pop();
          this.isdelete = false;
          this.$router.go(-1);
        } else {
          this.$toast("删除失败");
        }
      });
    },
    isdisplacethumbup(data) {
      const params = {
        replacedId: this.replacelist[data.commentindex].replacedId,
        createReplacedUserId: this.replacelist[data.commentindex].userId
      };
      if (this.replacelist[data.commentindex].isgood == 0) {
        api.Queryreplacethumbup(params).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({actType:11,typeValue:this.replacelist[data.commentindex].replacedId});//用户轨迹
            this.replacelist[data.commentindex].isgood = 1;
            this.replacelist[data.commentindex].likes = res.data;
            let placeObj = JSON.parse(localStorage.placeStorage);
            if(this.$route.query.replaceIndex<placeObj.commentlist.length){
              placeObj.commentlist[this.$route.query.replaceIndex].isgood=res.isGood;
              placeObj.commentlist[this.$route.query.replaceIndex].likes=res.data;
            }
            localStorage.placeStorage = JSON.stringify(placeObj)
          }
        });
      } else if (this.replacelist[data.commentindex].isgood == 1) {
        api.Querycanclereplacethumbup(params).then(res => {
          if (res.success) {
            this.replacelist[data.commentindex].isgood = 0;
            this.replacelist[data.commentindex].likes = res.data;
            let placeObj = JSON.parse(localStorage.placeStorage);
            if(this.$route.query.replaceIndex<placeObj.commentlist.length){
              placeObj.commentlist[this.$route.query.replaceIndex].isgood=res.isGood;
              placeObj.commentlist[this.$route.query.replaceIndex].likes=res.data;
            }
            localStorage.placeStorage = JSON.stringify(placeObj)
          }
        });
      }
    },
    iscomentdetailthumb(data) {
      const likeparam = {
        commentId: this.commentList[data.commentindex].replyId,
        createReplacedUserId: this.commentList[data.commentindex].userId
      };
      const canclelikeparam = {
        commentId: this.commentList[data.commentindex].replyId
      };

      if (this.commentList[data.commentindex].isgood == 0) {
        api.Queryreplacecommentthumbup(likeparam).then(res => {
          if (res.success) {
            this.$util.saveFootPrint({actType:12,typeValue:this.commentList[data.commentindex].replyId});//用户轨迹
            this.commentList[data.commentindex].isgood = 1;
            this.commentList[data.commentindex].likeNumber = res.data;
          } else {
            this.$toast("点赞失败");
          }
        });
      } else if (this.commentList[data.commentindex].isgood == 1) {
        api.Queryreplacecommentcanclethumbup(canclelikeparam).then(res => {
          if (res.success) {
            this.commentList[data.commentindex].isgood = 0;
            this.commentList[data.commentindex].likeNumber = res.data;
          } else {
            this.$toast("取消点赞失败");
          }
        });
      }
    },
    todisplacepublish() {
      this.$router.push({
        path: "/publishreplacecomments",
        query: {
          replacedUserId: this.replacelist[0].userId,
          replacedId: this.replacelist[0].replacedId,
          replyUserId: "",
          parentId: "",
          replaceIndex: this.$route.query.replaceIndex
        }
      });
    },
    deletereplace() {
      this.isdelete = true;
    },
    deletemyreplace() {
      this.showdelete = true;
      this.isdelete = false;
      this.mystatus = "big";
    },
    repeatmyreplace() {
      localStorage.turnCount = "";
      this.$router.push({
        path: "/publishreplace",
        query: { replacedId: this.$route.query.replacedId, isrepeat: true ,tag:0}
      });
    },
    iscancle() {
      this.isdelete = false;
    },
    replyother(data) {
      if (
        localStorage.getItem("userId") ==
        this.commentList[data.commentindex].userId
      ) {
        this.ismyself = true;
      } else {
        this.ismyself = false;
      }
      this.isreply = true;
      this.tag = data.commentindex;
    },
    replycom() {
      this.$router.push({
        path: "/publishreplacecomments",
        query: {
          replacedUserId: this.replacelist[0].userId,
          replacedId: this.replacelist[0].replacedId,
          replyUserId: this.commentList[this.tag].userId,
          parentId: this.commentList[this.tag].replyId
        }
      });
    },
    canclereply() {
      this.deletereplacereply = false;
    },
    okreply() {
      if (localStorage.getItem("userId") != this.commentList[this.tag].userId) {
        return;
      }
      const id = {
        replacedReplyId: this.commentList[this.tag].replyId,
        userId: this.commentList[this.tag].userId
      };
      api.Querydeletereplacecomments(id).then(res => {
        if (res.success) {
          this.deletereplacereply = false;
          this.commentList.splice(this.tag, 1);
          this.commentcounts -= 1;
        }
      });
    },
    deletereply() {
      this.showdelete = true;
      this.isreply = false;
      this.mystatus = "small";
    },
    replycancle() {
      this.isreply = false;
    },
    //图片自动旋转参数
    picAutoOrient(data) {
      for (var m = 0; m < data.length; m++) {
        for (var n = 0; n < data[m].picture.length; n++) {
          data[m].picture[n].src =
            data[m].picture[n].src + "?imageMogr2/auto-orient";
        }
      }
    },
    iscollectevent(data){
      if(this.rightcollectsvgicon==0){
        const params = {type:2,itemId:this.$route.query.replacedId};
        api.addCollection(params).then(res=>{
            if(res.success){
                this.$util.saveFootPrint({actType:15,typeValue:this.$route.query.replacedId});//用户轨迹
                this.rightcollectsvgicon=1;
                this.$toast("收藏成功");
            }
        }) 
      }else if(this.rightcollectsvgicon==1){
        const params = {type:2,itemId:this.$route.query.replacedId};
        api.cancelCollection(params).then(res=>{
            if(res.success){
                this.rightcollectsvgicon=0;
                this.$toast("取消收藏成功");
            }
        })  
      }
    },
    deleteshow(data){
        this.showdelete=data;
    },
  }
};
</script>
<style lang="less" scoped>
.allcomments {
  width: 100%;
  height: 0.89rem;
  background-color: white;
  line-height: 0.88rem;
  font-family: "PingFangSC Regular";
  font-size: 0.3rem;
  color: #666666;
  padding: 0 0.3rem;
  border-bottom: 1px solid #e6e6e6;
}

.bottom-sep {
  width: 6.9rem;
  margin-left: 0.3rem;
  height: 1px;
  background-color: #e6e6e6;
}

.delete {
  height: 0.9rem;
  width: 100vw;
  line-height: 0.9rem;
  font-size: 0.3rem;
  color: #333333;
  font-family: "PingFangSC Regular";
  text-align: center;
}

.cancle {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.3rem;
  color: #de4b4e;
  font-family: "PingFangSC Regular";
  text-align: center;
}

.delete-header-popup {
  border-radius: 0.1rem;
}

.repdelete {
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: 0.32rem;
  font-family: "PingFangSC Regular";
  color: #333333;
}

.rep-bottom {
  border-top: 1px solid #d1d1d1;
  display: flex;
  color: #fb685b;
  font-size: 0.32rem;
}

.cancle-sep {
  border-right: 1px solid #d1d1d1;
  flex: 1;
  height: 0.89rem;
  text-align: center;
  line-height: 0.89rem;
}

.queding {
  flex: 1;
  height: 0.89rem;
  text-align: center;
  line-height: 0.89rem;
}

.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}

.loadmore-ul {
  padding-bottom: 1.2rem;
  list-style: none;
}
</style>
